<script>
import { reactive } from 'vue';

export default {
  setup() {
    // reactive函数可以把一个对象/数组变成响应式对象/数组
    const person = reactive({
      name: '刘德华',
      age: 19,
      sex: '男'
    })
    // console.log(person)

    const friends = reactive(['周润发', '张学友'])
    console.log(friends)

    return { person, friends }
  }
}
</script>

<template>
  <div>
    <p>姓名: {{ person.name }},年龄: {{ person.age }}, 性别: {{ person.sex }}</p>
    <button @click="person.sex = '女'">修改信息</button>
    <hr>
    <p>朋友们:{{ friends }}</p>
    <!-- <button @click="friends.push('王菲')">修改数组</button> -->
    <button @click="friends[4] = '张学鑫'">修改数组</button>
  </div>
</template>

<style scoped></style>
